<template>
  <el-dialog
    title="自定义导出"
    :visible.sync="showExportExcel"
    width="500px"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    @close="close"
    append-to-body
  >
    <hr class="boundary"/>
    <div class="el-dialog-content">
      <div class="contentLeft">
        <div class="cardHeader" slot="header">
          <span>请选择字段</span>
        </div>
          <div id="field" class="exportField" v-for="(item,index) in leftColumns" @mousedown="test">
            <span class="fieldText">{{item.title}}</span>
            <span class="fieldIcon">
              <i class="el-tag__close el-icon-plus plus-tag" style="cursor: pointer" @click="getData(item,index)"></i>
            </span>
          </div>
      </div>
      <div class="contentRight">
        <div class="cardHeader" slot="header">
          <span>导出字段</span><span style="font-size: 10px;font-weight: 700">（拖拽可排序）</span>
        </div>
        <draggable v-model="rightColumns" v-bind="{
          animation: 200,
          group: 'description',
          disabled: false,
          ghostClass: 'ghost'
        }">
          <div
            class="exportField"
            v-for="(element,index) in rightColumns"
            :key="element.key"
          >
            {{ element.title }}
            <span class="fieldIcon">
              <i class="el-tag__close el-icon-minus plus-tag" style="cursor: pointer" @click="removeData(element,index)"></i>
            </span>
          </div>
        </draggable>
      </div>
    </div>
    <hr class="boundary"/>
    <div class="el-dialog__footer">
      <div style="float: left">
        文件名：
        <el-input v-model="fileName" style="margin-bottom: 10px;width: 150px;" size="mini"></el-input>
      </div>
      <el-button size="mini" @click="close">取消</el-button>
      <el-button class="btn" size="mini" @click="exportExcel" type="primary" :disabled="fileName===''">导出</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { export2Excel } from "../../common/js/util";
  import draggable from "vuedraggable"

  export default {
    components:{
      draggable
    },
    props:{
      showExportExcel: Boolean,
      tableData: []
    },
    data(){
      return{
        leftColumns: [
          {title: '楼栋',key: 'building'},
          {title: '房间',key: 'room'},
          {title:'设备名称',key: 'name'},
          {title: '设备编码',key: 'addressCode'},
          {title: '用电量',key: 'totalEc'},
          {title: '使用部门',key: 'dept'}
        ],
        rightColumns: [],
        time: '',
        fileName: ''
      }
    },
    methods:{
      close(){
        this.leftColumns = [
        {title: '楼栋',key: 'building'},
        {title: '房间',key: 'room'},
        {title:'设备名称',key: 'name'},
        {title: '设备编码',key: 'addressCode'},
        {title: '用电量',key: 'totalEc'},
        {title: '使用部门',key: 'dept'}
      ]
        this.rightColumns = []
        this.$emit('closeExport')
      },
      exportExcel(){
        const df = new Date()
        this.time = df.getFullYear()+'-'+(df.getMonth()+1)+'-'+df.getDate()+' '+df.getHours()+':'+df.getMinutes()+':'+df.getSeconds()
        let exportColumns = [{title: '序号',key: 'id'}]
        this.rightColumns.forEach(item => {
          exportColumns.push(item)
        })
        exportColumns.push({title: '导出时间',key: 'systemTime'})
        for (let i = 0;i<this.tableData.length;i++){
          this.tableData[i]['id']=i+1
          this.tableData[i]['systemTime']=this.time
        }
        export2Excel(exportColumns,this.tableData,this.fileName)
      },
      getData(item ,index) {
        console.log(item+index)
        this.leftColumns.splice(index,1)
        this.rightColumns.push(item)
      },
      removeData(item , index){
        this.rightColumns.splice(index,1)
        this.leftColumns.push(item)
      },
      test(){
        console.log(this.rightColumns)
      }
    }
  }
</script>

<style scoped>
  @import '../../assets/public/model.css';

  .el-dialog-content{
    height: 200px;
    padding: 10px;
  }
  .el-dialog-content .contentLeft{
    float: left;
    overflow-y: scroll;
    width: 220px;
    height: 270px;
  }
  .el-dialog-content .contentRight{
    float: right;
    overflow-y: scroll;
    width: 220px;
    height: 270px;
  }
  .exportField{
    background-color: #ecf5ff;
    border-color: rgba(0, 0, 0, 0.04);
    display: inline-block;
    height: 32px;
    padding: 0 10px;
    line-height: 30px;
    font-size: 12px;
    color: #409eff;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
    width: 100%;
    margin: 2px 0 0 0;
  }
  .cardHeader{
    display: inline-block;
    width: 100%;
    text-align: center;
    height: 25px;
    border-bottom: 1px solid #000;
    line-height: 25px;
    border-radius: 5px 5px 0 0;
    background: #eee;
  }
  .plus-tag:hover{
    color: #dd6161;
  }
  .fieldText{
    display: inline-block;
    padding: 0 0 0 5px;
  }
  .fieldIcon{
    float: right;
  }
</style>
